import React, { useState, useEffect } from "react";
import {
  Layout,
  Menu,
  Breadcrumb,
  message,
  Tree,
  Col,
  Row,
  Input,
  Button,
  Modal,
} from "antd";
import { UserOutlined } from "@ant-design/icons";
import html2canvas from "html2canvas";
import Header from "../components/head";
import { Footer } from "antd/lib/layout/layout";

import NeoVis from "neovis.js";

import name_list from "../static/name_list.json";

import people_list from "../static/person_dict.json";
import servicePath from "../utils/config";

const { SubMenu } = Menu;
const { Content, Sider } = Layout;
const { Search } = Input;

function AddArticle(props) {
  const [articleContent, setArticleContent] = useState("");
  const [visible, setVisible] = useState(false);

  const [imgUrl, setimgUrl] = useState("");


  useEffect(() => {
    draw();
  }, []);

  const onSelect = (selectedKeys, info) => {
    let user_name = info["node"]["title"];
    draw_item(user_name);
  };
  const onSearch = (value) => {
    let tag = isChinese(value);
    if (!tag) {
      message.info("请输入正确人物名称");
      return;
    }
    draw_item(value);
    console.log(value, tag);

    // draw()
  };
  const draw = () => {
    let viz;
    let config = {
      container_id: "viz",
      server_url: servicePath.server_url,
      server_user: servicePath.server_user,
      server_password: servicePath.server_password,
      labels: {
        特征: {
          caption: "name",
          // "size": "pagerank",
          font: {
            size: 20,
            color: "#000000",
          },
        },
        //"Character": "name",
        人物: {
          caption: "name",
          size: "pagerank",

          font: {
            size: 25,
            color: "#000000",
          },
        },
        相关: {
          caption: "name",
          size: "pagerank",

          font: {
            size: 20,
            color: "#000000",
          },
        },
        属性: {
          caption: "name",
          size: "pagerank",

          font: {
            size: 20,
            color: "#000000",
          },
        },
        关联: {
          caption: "name",
          size: "pagerank",

          font: {
            size: 20,
            color: "#000000",
          },
        },
      },
      relationships: {},
      initial_cypher: `MATCH (n)-[r]->(m) RETURN n,r,m LIMIT 110`,
      //   initial_cypher: "MATCH (n) RETURN n LIMIT 100"
    };
    viz = new NeoVis(config);
    viz.registerOnEvent("completed", () => {
      viz._network.on("click", (nodes) => {
        console.log(nodes["nodes"]);
        let node_id = nodes["nodes"];
        let user_name = people_list[node_id];
        if (!user_name) {
          message.info("信息库没有该信息");
        } else {
          draw_item(user_name);
        }
      });
    });
    viz.render();
    // console.log(viz);
  };
  const draw_item = (v) => {
    let viz;
    let config = {
      container_id: "viz",
      server_url: servicePath.server_url,
      server_user: servicePath.server_user,
      server_password: servicePath.server_password,
      labels: {
        特征: {
          caption: "name",
          // "size": "pagerank",
          font: {
            size: 20,
            color: "#000000",
          },
        },
        //"Character": "name",
        人物: {
          caption: "name",
          size: "pagerank",

          font: {
            size: 25,
            color: "#000000",
          },
        },
        相关: {
          caption: "name",
          size: "pagerank",

          font: {
            size: 20,
            color: "#000000",
          },
        },
        属性: {
          caption: "name",
          size: "pagerank",

          font: {
            size: 20,
            color: "#000000",
          },
        },
        关联: {
          caption: "name",
          size: "pagerank",

          font: {
            size: 20,
            color: "#000000",
          },
        },
      },
      relationships: {},
      //   initial_cypher: `MATCH (n:人物{name:'${v}'})-[r]-(m) RETURN n,r,m LIMIT 100`,
      initial_cypher: `MATCH (n:人物{name:'${v}'})-[r*1..3]-(m) RETURN *`,
    };
    viz = new NeoVis(config);
    viz.registerOnEvent("completed", () => {
      viz._network.on("click", (nodes) => {
        console.log(nodes["nodes"]);
        let node_id = nodes["nodes"];
        let user_name = people_list[node_id];
        if (!user_name) {
          message.info("信息库没有该信息");
        } else {
          draw_item(user_name);
        }
      });
    });
    viz.render();
    message.success("查询成功");
  };

  const isChinese = (temp) => {
    let re = /^([\u4e00-\u9fa5·]{2,16})$/;
    if (!re.test(temp)) return false;
    return true;
  };
  const mclick = () =>{
    const n = document.getElementsByClassName("aa")[0];
    const a = document.getElementById("a");

    html2canvas(n).then(canvas => {
      const imgUrl = canvas.toDataURL();
      // 获取截图base64 
      console.log(imgUrl);
    });
  }
  return (
    <Layout>
      <Header />
      <Row>
        <Col span={4}></Col>
        <Col span={16}>
          <Layout>
            <Sider
              style={{
                padding: 30,
              }}
              width={300}
            >
              <Tree
                showLine
                onSelect={onSelect}
                treeData={name_list}
                height={700}
              />
            </Sider>
            <Content
              style={{
                padding: 30,
                margin: 0,
              }}
            >
              <Search
                placeholder="请输人物名称"
                enterButton="搜索"
                size="large"
                onSearch={onSearch}
                allowClear
              />
              <div
                id="viz"
                style={{
                  backgroundColor: "#fff",
                  marginTop: "10px",
                  height: "700px",
                  //   border:"1px solid"
                }}
              ></div>
            </Content>
          </Layout>
        </Col>
        <Col span={4}>
          {/* <Button>ss</Button>
          <Modal className="aa" visible={true}>
            <h1 id="a">aaaaa</h1>
            <h2 id="b">bbbbb</h2>
            <Button onClick={mclick}>点击截图</Button>
            <img src={imgUrl} alt="" srcset="" />
          </Modal> */}
        </Col>
      </Row>
      <Footer style={{ textAlign: "center" }}>
        {/* 蒙古人物知识图谱 &copy; 2021 内蒙古大学计算机学院自然语言处理实验室
        版权所有 */}
      </Footer>
    </Layout>
  );
}

export default AddArticle;
